<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="综合榜" name="first">
      <CardList :dataList="danceList"></CardList>
    </el-tab-pane>
    <el-tab-pane label="热练榜" name="second">
      <HotPractice></HotPractice>
    </el-tab-pane>
    <el-tab-pane label="新锐榜" name="third">
      <Aggressive></Aggressive>
    </el-tab-pane>
    <el-tab-pane label="最新" name="fourth">
      <NewsList></NewsList>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import HotPractice from './component/HotPractice/index.vue';
import Aggressive from './component/Aggressive/index.vue';
import NewsList from './component/NewsList/index.vue';
// import AllRound from './component/AllRound/index.vue'
import CardList from '../CardList/index.vue';
import {onMounted, ref} from 'vue'

import {ElMessage} from "element-plus";

import DanceListApi from '@/api/rescources/DanceList';
const activeName = ref('first')
const pageSize = ref(20);
const pageNum = ref(0);
const column = ref<any>('original');
const danceList = ref<any>([]);

const getWorksList = async () => {
  try {
    const result = await DanceListApi.getWorksList("5858c60a-7a7c-4593-869e-3019e126c4f2",pageSize.value,pageNum.value,column.value)

    danceList.value = result.content
  } catch (error) {
    console.error(error);
    ElMessage.error('获取作品列表数据失败')
  }
}

onMounted(() => {

  getWorksList()
})
</script>

<style scoped>

</style>
